<template>
  <view class="points-page">
    <!-- 标题 -->
    <view class="page-header">
      <text class="title">积分排行榜</text>
      <view class="decor-line"></view>
    </view>

    <!-- 排名列表 -->
    <scroll-view scroll-y class="ranking-list">
      <view v-for="(item, index) in rankings" :key="index" class="ranking-card">
        <!-- 排名序号 -->
        <view class="rank-index" :class="rankColors[index]">
          <text class="number">{{ index + 1 }}</text>
          <view class="cuIcon-trophy" v-if="index < 3"></view>
        </view>

        <!-- 用户信息 -->
        <view class="user-info">
          <text class="name">{{ item.userName }}</text>
          <text class="points">{{ item.pointsValue }} 积分</text>
        </view>

        <!-- 装饰元素 -->
        <view class="decor-line"></view>
      </view>
    </scroll-view>

    <!-- 兑换按钮 -->
    <view class="exchange-btn" @click="navToExchange">
      <view class="cuIcon-shop"></view>
      <text>积分兑换</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rankingList: [
        // { name: "张三", points: 9845 },
        // { name: "李四", points: 7654 },
        // { name: "王五", points: 6543 },
        // { name: "赵六", points: 5432 },
        // { name: "孙七", points: 4321 },
        // { name: "周八", points: 3210 },
        // { name: "吴九", points: 2109 },
      ],
      rankColors: ["gold", "silver", "bronze", "normal"],
    };
  },
  onLoad() {
    this.getrankingList();
  },
  onShow() {
  	 this.getrankingList();
  },
  computed: {
    rankings() {
      const ranks = [...this.rankingList].sort(
        (a, b) => b.pointsValue - a.pointsValue
      );

      return ranks;
    }
  },
  methods: {
    async getrankingList() {
      try {
        let res = await this.$api.list("points", {
          jfType: uni.getStorageSync("roles"),
        });
        if (res.code === 200) {
          this.rankingList = res.rows;
        }
      } catch (error) {}
    },
    getRankColor(rank) {
      return {
        gold: rank === 1,
        silver: rank === 2,
        bronze: rank === 3,
        normal: rank > 3,
      };
    },
    navToExchange() {
      uni.navigateTo({
        url: "/pages/goods/goods",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.points-page {
  background: linear-gradient(15deg, #f8f9ff 0%, #f1f3fe 100%);
  min-height: 100vh;
  padding: 40rpx;
}

.page-header {
  margin-bottom: 48rpx;
  .title {
    font-size: 48rpx;
    font-weight: 600;
    color: #2d3748;
    position: relative;
  }
  .decor-line {
    height: 4rpx;
    width: 80rpx;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    margin-top: 16rpx;
  }
}

.ranking-list {
  height: calc(100vh - 280rpx);
}

.ranking-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.1);

  .rank-index {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 32rpx;

    &.gold {
      background: linear-gradient(45deg, #ffd700, #daa520);
    }
    &.silver {
      background: linear-gradient(45deg, #c0c0c0, #a8a8a8);
    }
    &.bronze {
      background: linear-gradient(45deg, #cd7f32, #a0522d);
    }
    &.normal {
      background: #667eea;
    }

    .number {
      font-size: 36rpx;
      font-weight: 600;
      color: white;
    }

    .cuIcon-trophy {
      font-size: 32rpx;
      color: white;
      margin-top: 4rpx;
    }
  }

  .user-info {
    display: flex;
    justify-content: space-between;
    flex: 1;
    .name {
      font-size: 32rpx;
      color: #2d3748;
      font-weight: 500;
      margin-bottom: 8rpx;
      // margin-right: rpx
    }
    .points {
      font-size: 28rpx;
      color: #718096;
    }
  }

  .decor-line {
    width: 8rpx;
    height: 60rpx;
    background: linear-gradient(180deg, #667eea, #764ba2);
    border-radius: 4rpx;
    margin-left: 32rpx;
  }
}

.exchange-btn {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 60rpx;
  padding: 24rpx 48rpx;
  display: flex;
  align-items: center;
  color: white;
  font-size: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
  transition: all 0.2s;

  &:active {
    transform: translateX(-50%) scale(0.98);
  }

  .cuIcon-shop {
    font-size: 36rpx;
    margin-right: 16rpx;
  }
}
</style>
